/**
 *@author：yc
 *@pramas: 
  * //"tableDatas", Object,表格数据，如果该集合为空则取查询路径获取数据
  * "queryTableDataUrl",String,表格数据查询路径
  * "tableColumn", Object,表格列属性集合，与tableDatas的数据对应
  * "isColExpand", Boolean,是否显示折叠行，非必填默认false
  * "isPageByServerSide", Boolean,服务端处理分页，非必填默认false：前台处理
	*@return:select-rowidx-handler方法，返回当前选中的行信息
 * 备注：
 */
<template>
	<div>
	<el-table :data="tableDataPage" border style="width: 100%" highlight-current-row @current-change="handleCurrentChange">
		<el-table-column width="50">
			<template slot-scope="scope">
				<label class="radio">
					<input type="radio" value="2" name="radio" :data-index="scope.row.index">
					<span class="dot"></span>
				</label>
			</template>
		</el-table-column>
		<el-table-column type="expand" v-if="isColExpand">
			<template slot-scope="props">
		        <el-form label-position="left" inline class="goods-table-expand">
		        	<el-form-item v-for="column in tableColumn" :prop="column.columnName" :label="column.columnLabel" v-if="!column.isPicColumn">
		        		<span>{{ props.row[column.columnName] }}</span>
		        	</el-form-item>
		        </el-form>
		    </template>
		</el-table-column>
		<el-table-column v-for="column in tableColumn" :prop="column.columnName" :label="column.columnLabel" 
			v-if="column.isColumnShow" :show-overflow-tooltip="true" sortable>
			<template slot-scope="scope" >
				<div v-if="column.isPicColumn">
					<img v-if="isPicPath(scope.row, column.columnName)" :src="scope.row[column.columnName]" :alt="scope.row[column.columnName]" style="width: 70px;height: 70px">
					<i v-else class="el-icon-picture-outline" style="width: 70px;height: 70px"></i>
					<!--<img :src="../../../static/images/link.png" :alt="column.columnLabel" style="width: 50px;height: 50px">-->
				</div>
				<div v-else-if="column.type!=undefined && column.type=='queryData'">
					{{scope.row[column.columnName]}}
				</div>
				<div v-else>
					{{ tranColumnValue(column.columnName, scope.row[column.columnName]) }}
					<!-- {{ scope.row[column.columnName] }} -->
				</div>
			</template>
		</el-table-column>
	</el-table>
	<el-pagination
	  @size-change="pageSizeChange"
	  @current-change="handleCurrentChangePage"
	  :current-page="pagination.currentPage"
	  :page-sizes="[10,20, 50, 100, 200]"
	  :page-size="pagination.pageSize"
	  layout="->,prev, pager, next, jumper, sizes,total"
	  :total="pagination.totalSize">
	</el-pagination>
	</div>
</template>

<script>
	import {
		Message
	} from 'element-ui';
	import store from '../store'
	export default {
		name:'m-table-complex',
		props: {
			tableDatas: {  // 表格绑定的数据集合
				type: Array,
				default() {          
					return [] ;      
				} 
			},
			queryTableDataUrl:{ // 表格数据请求路径
				type: String,
				required: false,
				default: ''
			},
			queryTableDataParms:{ // 表格数据请求参数
				type: Object,
				required: false,
				default () {          
					return  {}        
				} 
			},
			tableColumn:{  // 表格显示的列属性集合
				type: Array,
			},
//			brandDatalist:{ // 品牌下拉框数据集合
//				type: Array,
//				required: false,
//				default () {          
//					return []       
//				} 
//			},
//			categoryDatalist:{ // 产品分类下拉框数据集合
//				type: Array,
//				required: false,
//				default () {          
//					return []       
//				} 
//			},
//			goodsDatalist:{ // 产品下拉框数据集合
//				type: Array,
//				required: false,
//				default () {          
//					return []       
//				} 
//			},
//			specificationDatalist:{ // 特性下拉框数据集合
//				type: Array,
//				required: false,
//				default () {          
//					return []       
//				} 
//			},
//			attributeDatalist:{ // 属性下拉框数据集合
//				type: Array,
//				required: false,
//				default () {          
//					return []       
//				} 
//			},
// 			attributeCategoryDatalist:{ // 属性类别下拉框数据集合
// 				type: Array,
// 				required: false,
// 				default () {          
// 					return []       
// 				} 
// 			},
			isColExpand: { // 是否显示折叠行
			  type: Boolean,
			  required: false,
			  default: false
			},
			isPageByServerSide: { // 是否后台服务处理分页
			  type: Boolean,
			  required: false,
			  default: false
			},
		},
	data () {
		return {
			tableDatalist:[], //通过查询接口获取的数据集合
			pagination:{
				totalSize:0,
				pageSize: 20,
				currentPage:1,
			},
			urlPaths:{
				brandQueryList:'brand/selectList',
				categoryQueryList:'category/selectList',
				goodsQueryList:'goods/selectList',
				specificateQueryList:'specification/selectList',
				attributeCategoryQueryList:'attributeCategory/selectList',
				attributeQueryList:'attribute/selectList',
			},
	//     	randomId:'mychart'+ Date.now() + Math.random(),
		}
	},
	mounted() {
		this.initData();
	},
	computed:{
		/**
		 * @author：yc
		 * @function: 转换表中显示的图片属性，将其转换成图片展示
。			 * @pramas: 
		 */
		isPicPath(value, columnName){
			return function (value, columnName){
				return value[columnName]!=undefined && value[columnName].length>0;
			}
		},
		/**
		 * @author：01367604
		 * @function: 当鼠标移动到图片地址时，显示图片缩略图
		 * @pramas: 
		 */
		showSlotPic() {
			
		},
		/**
		 * @author：01367604
		 * @function: 转换表中显示的属性值，将ID转换成名称
		 * @pramas: 
		 */
		tranColumnValue(columnName, columnValue){
			return function (columnName, columnValue){
				// console.log(columnName+ ': '+columnValue);
				var col = this.tableColumn.find((element) => (element.columnName == columnName));
				if (col!=undefined && col.isInputSelectList!=undefined && col.isInputSelectList==true){
					var datas = col.selectListData;
					if (datas!=undefined){
						var colElem = datas.find((element) => (element.id == columnValue));
						if (colElem !=undefined && colElem.name !=undefined && colElem.name.length>0){
							return colElem.name;
						}
					}
				} 
				return columnValue;
			}
		},
		tableDataPage(){
			if (!this.isPageByServerSide){ // 数据量少，前端分页处理
//				if (this.tableDatas.length>0){
					return this.tableDatalist.slice((this.pagination.currentPage-1)*this.pagination.pageSize,this.pagination.currentPage*this.pagination.pageSize);
//				}
			} else { // 后端服务端处理分页，后端添加分页逻辑
				console.log('后台分页');
				return this.tableDatalist;
			}
		}
	},
	watch: {
// 		isNeedReQuery: {//传入参数
// 			deep: true,
//             handler: function (newVal, oldVal){
// 				console.log('reQueryFlag :'+newVal);
// 				if (newVal==true) {
// 					this.initData();
// 					this.isNeedReQuery=false;
// 				}
//             }
// 	  	}
		tableDatalist:{
			handler: function (newVal, oldVal){
				this.$emit('tableDatas-handler', newVal); 
			}
		},
		tableDatas:{
			handler: function (newVal, oldVal){
				console.log('tableDatas is changed');
				this.tableDatalist=newVal;
			}
		}
	},
	methods: {
		initData(){
			// debugger;
			for (var col of this.tableColumn){ // 查询辅助数据
				if (col.isInputSelectList!=undefined && col.isInputSelectList==true){
					this.querySelectList(col.dataQueryUrl, col);
				}
			}
			this.queryTableData();// 查询表格中数据
		},
		/*查询表格数据接口*/
		queryTableData(){
			if (this.isPageByServerSide){
				this.queryTableDataParms['pageSize']=this.pagination.pageSize;
				this.queryTableDataParms['startPage']=this.pagination.currentPage;
			}
			this.$httpExt().get(this.queryTableDataUrl, this.queryTableDataParms).then((response) => {
				var rows= response.rows;
				console.log('queryTable num: ' +response.totalSize);
				for(let [index, item] of rows.entries()){
					item.index = index
				}
				this.tableDatalist = rows;
				this.pagination.totalSize = response.totalSize;
				// this.tableDatas= this.tableDatalist;
//				this.getTablePage();
			},(response) => {
				Message({
					message: '服务器请求失败，请重试！',
					type: 'warning'
				});
			});
		},
		/*查询相关下拉列表数据接口*/
		querySelectList(url, column){
			this.$httpExt().get(url).then((response) => {
				var rows= response.rows;
				console.log('selectList size:' + rows.length);
				column.selectListData = rows;
				// console.log(this.tableColumn);
			},(response) => {
				Message({
					message: '服务器请求失败，请重试！',
					type: 'warning'
				});
			});
		},
		/*翻页*/
		handleCurrentChangePage(val){
			this.pagination.currentPage = val;
//			console.log(this.pagination.currentPage);
//			this.getTablePage();
			if (this.isPageByServerSide){
				this.queryTableData();
			}
		},
		/*切换显示条数*/
		pageSizeChange(val){
			this.pagination.pageSize = val;
			this.pagination.currentPage = 1;
//			console.log(this.pagination.pageSize);
//			this.getTablePage();
			if (this.isPageByServerSide){
				this.queryTableData();
			}
		},
		/*选择一条数据*/
		handleCurrentChange(val) {
			if(!val) {
				return
			}
			console.log('this.currentRow ',val);
			this.$emit('select-rowidx-handler', val); 
		},
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
// .linecharts{
//     width: 100%;
// }
</style>
